<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text-html; charset=utf-8">
<link type="text/css" href="css/cupertino/jquery-ui-1.8.9.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
var bg = chrome.extension.getBackgroundPage();
function getSliderLabel(val){
	if(Math.round(val) != val){
		if(val == 0.5) {
			return "每30秒"
		} else {
			return "每" + (Math.round(val) - 1) + "分" +　"30秒"
		}
	} else {
		return "每" +val + "分钟"
	}
}
function slide_func(event,ui){
	$('#slider_val').val(getSliderLabel(ui.value));
	bg.setQueryInterval(ui.value);
}
function getRightIcon(flag){
	if(flag) {
		return 'ui-icon-check';
	}else {
		return 'ui-icon-close';
	}
}
$(function()
    {
	if (bg.oauth.hasToken()) {
	console.log("authorized");
	// authorized
	$('#login_btn').hide();
	$('#user_img').attr('src',localStorage.getItem('tc_imageurl'));
	$('#user_name').html('<a href="http://t.sina.com.cn/' + localStorage.getItem('tc_uid') + '" >'
		+ localStorage.getItem('tc_screenname') + '</a><br><font style="font-weight:normal">' 
		+ localStorage.getItem('tc_desc')) + '</font>';
	$('#slider').slider({	min:0.5,
				max:30,
				value: localStorage.getItem('query_interval_in_mins'),
				step: 0.5,
				 slide: slide_func
				});
	$('#slider_val').val(getSliderLabel(localStorage.getItem('query_interval_in_mins')));
	$('#ck_comments').button( {icons: {
                primary: getRightIcon(eval(localStorage.getItem('tc_comment_flag')))
		}});
	$('#ck_followers').button({icons: {
                primary: getRightIcon(eval(localStorage.getItem('tc_follower_flag')))
		}});
	$('#ck_mentions').button({icons: {
                primary: getRightIcon(eval(localStorage.getItem('tc_mention_flag')))
		}});
	$('#ck_dms').button({icons: {
                primary: getRightIcon(eval(localStorage.getItem('tc_dm_flag')))
		}});
	}else {
		$('#logout').hide();
		$('#slider_all').hide();
		$('#chooser').hide();
		$('#user_info').hide();
		$('#login_btn').button({ 
				label: "登录微博",
				disabled: false });	
	}
    });
function login(){
	bg.doAuthorize();
	window.location=window.location;
	//window.close();
}

function logout(){
	bg.doLogout();
	window.location=window.location;
	//window.close();
}
function click_comments(){
	var cv = eval(localStorage.getItem('tc_comment_flag'));
	$("#ck_comments").button( "option", "icons", {primary:getRightIcon(!cv)} );
	$("#ck_comments").attr("checked", !cv);
	localStorage.setItem('tc_comment_flag',!cv);
}
function click_followers(){
	var cv = eval(localStorage.getItem('tc_follower_flag'));
	$("#ck_followers").button( "option", "icons", {primary:getRightIcon(!cv)} );
	$("#ck_followers").attr("checked", !cv);
	localStorage.setItem('tc_follower_flag',!cv);
}
function click_mentions(){
	var cv = eval(localStorage.getItem('tc_mention_flag'));
	$("#ck_mentions").button( "option", "icons", {primary:getRightIcon(!cv)} );
	$("#ck_mentions").attr("checked", !cv);
	localStorage.setItem('tc_mention_flag',!cv);
}
function click_dms(){
	var cv = eval(localStorage.getItem('tc_dm_flag'));
	$("#ck_dms").button( "option", "icons", {primary:getRightIcon(!cv)} );
	$("#ck_dms").attr("checked", !cv);
	localStorage.setItem('tc_dm_flag',!cv);
}
</script>
<style type="text/css">
body{ 	font: 67.5% sans-serif;  
	background: -webkit-gradient(
		linear,
                left top, 
		left bottom, 
		from(#DDF3F7), 
		to(#FFFFFF));
		}
#logout {position: absolute; left:130px;}
#logout a:hover {	color: #1d4bd7;background-color:#7ad0f2;}
//#login_btn {position: relative;margin-left:20%;margin-right:20%;}
#user_name {position: relative;font-weight: bolder}
.item {margin-top:2px;}
</style>	
</head>
<body>

<div id='logout'><a href='javascript:logout();'>注销</a></div>
<!-- <div id='icon' style="margin-bottom:5px"><image src='sina2.png'/></div> -->
<input type='button' id="login_btn" onclick="javascript:login()"/>
<div id='user_info'>
	<br>
	<image id='user_img'  src="" style="float:left;margin-right:10px;" /image>
	<p id='user_name'></p><br>
	<p id='user_desc'>
</div>
<div id='chooser'>
	<p>查询我的:</p>
	<button id="ck_comments" onclick="click_comments()" style="position:relative;width:100%">新评论</button> 
	<button id="ck_followers" onclick="click_followers()" style="position:relative;width:100%">新粉丝</button> 
	<button id="ck_mentions" onclick="click_mentions()" style="position:relative;width:100%">新@我</button> 
	<button id="ck_dms" onclick="click_dms()" style="position:relative;width:100%">新私信</button> 
</div>
<div id="slider_all">查询间隔:</label>
	<input type="text" id="slider_val" style="border:0; color:#f6931f; font-weight:bold;background-color:transparent;" />
	<div id="slider"></div>
</div>
</body>
</html>
